<template>
  <el-container style="min-height: 100vh">
    <!-- 左侧 -->
    <left-component></left-component>
    <el-container style="flex-direction: column;">
      <!-- 头部 -->
      <header-component></header-component>
      <el-main>
        <!--下面这个div盒子是搜索框和搜索按钮 -->
        <!-- <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
            <el-button class="ml-5" type="primary">搜索</el-button>
        </div> -->

        <!--  下面这个div盒子是新增、批量删除、导入导出按钮的  -->
        <div class="pageTitleWrap" v-if="!showRenYuan">
          <div class="pageTitle">公司列表</div>
          <el-button type="primary" @click="openhandle">新增公司</el-button>
        </div>
         <div class="pageTitleWrap" v-if="showRenYuan">
          <div class="pageTitle"><span class="returnHandlec" @click="returnHandle"><i class="el-icon-back"></i></span>人员列表</div>
          <el-button type="primary" @click="openhandle2">新增人员</el-button>
        </div>
        <!-- 公司列表 -->
        <el-table :data="tableData" border stripe: header-cell-class-name="headerBg" v-if="!showRenYuan">
          <el-table-column prop="company" label="公司名称" width="240" align="center">
          </el-table-column>
          <el-table-column prop="count" label="公司人数" width="240" align="center">
          </el-table-column>
          <!-- 表格里面添加编辑和删除的按钮  -->
          <el-table-column label="操作"  align="center">
            <template v-slot="scope">
              <el-button type="success" @click="ShowCompanyUser(scope.row)">查看人员</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 人员列表 -->
        <el-table :data="tableData2" border stripe: header-cell-class-name="headerBg" v-if="showRenYuan">
          <el-table-column prop="userName" label="人员名称" width="240" align="center">
          </el-table-column>
          <!-- 表格里面添加编辑和删除的按钮  -->
          <el-table-column label="操作"  align="center">
            <template v-slot="scope">
              <el-button type="danger" @click="DeleteCompanyUser(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--下边这个div盒子是添加进来可以分页的代码 -->
        <div style="padding: 10px 0">
          <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" :current-page="current" layout="total, sizes, prev, pager, next" :total="total" @size-change="pageSizeChange"  @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-main>
    </el-container>
    <!-- 新增公司 -->
    <el-dialog title="新增公司" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <!-- <div class="tanTitle">新增用户之后,需要再boss进行授权才可以使用。</div> -->
        <el-form-item label="名称:" :label-width="formLabelWidth">
          <el-input v-model="form.companyName" placeholder="请输入公司名称" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBtn">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 新增人员 -->
    <el-dialog title="新增人员" :visible.sync="dialogFormVisible2">
      <el-form :model="form2">
        <!-- <div class="tanTitle">新增用户之后,需要再boss进行授权才可以使用。</div> -->
        <el-form-item label="人员名称:" :label-width="formLabelWidth">
          <el-input v-model="form2.companyUserName" placeholder="请输入人员名称" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="人员手机号:" :label-width="formLabelWidth">
          <el-input v-model="form2.userPhoneNumber" placeholder="请输入人员手机号" autocomplete="off"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveBtn2">保 存</el-button>
      </div>
    </el-dialog>
  </el-container>
  
</template>

<script>
import {
  whiteListCompanyListApi, //获取公司列表
  whiteListCompanyAddApi, //新增公司
  whiteListCompanyShowCompanyUserApi, //公司人员列表
  whiteListCompanyUserAddApi, //添加公司人员
  whiteListCompanyDeleteApi //删除人员
} from "@/api/api";
import HeaderComponent from '@/components/header.vue'
import LeftComponent from '@/components/left.vue'

export default {
  name: 'userList',
  components: {
    'header-component': HeaderComponent,
    'left-component': LeftComponent
  },
  data() {
    const item = {
      date: '1',
      name: '正常待授权',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      showRenYuan:false,//是否显示人员列表
      tableData:[],//公司列表
      tableData2:[],//公司人员列表
      headerBg: 'headerBg',
      dialogFormVisible: false,
      dialogFormVisible2:false,
      current: 1,//当前页
      pageSize: 10,//分页大小
      total:0,//总共多少
      form: { //新增公司
        need:true,
        companyName: ''
      },
      form2:{ //新增人员
        need:true,
        companyId: '',//公司id
        companyUserName: '',//人员名称
        userPhoneNumber: '',//人员手机号
      },
      formLabelWidth: '90px',
      selectCompany:{} //查看选中的公司信息
    }
  },
  mounted: function () {
    this.whiteListCompanyFun() //获取公司列表
  },
  methods: {
    // 获取公司列表
    whiteListCompanyFun() {
      let param = {
        current: this.current,//当前页
        pageSize: this.pageSize //分页大小
      }
      whiteListCompanyListApi(param).then(res => {
        console.log('获取公司列表')
        console.log(res)
        this.total = res.total
        this.tableData = res.data
      })
    },
     // pageSize 改变时会触发
     pageSizeChange(val){
      this.pageSize = val
      this.current = 1
      if(!this.showRenYuan){
        this.whiteListCompanyFun()
      }else{
        this.ShowCompanyUser()
      }
      
    },
    // currentPage 改变时会触发
    handleCurrentChange(val){
      this.current = val
      console.log("currentPage 改变时会触发")
      console.log(this.showRenYuan)
      if(!this.showRenYuan){
        this.whiteListCompanyFun()
      }else{
        this.ShowCompanyUser()
      }
    },
    // 点击新增公司-弹出弹出
    openhandle(){
      //清空表单数据
      this.form={
        need:true,
        companyName: '',//公司名称
      },
      this.dialogFormVisible = true
    },
    // 点击新增人员-弹出弹出
    openhandle2(){
      //清空表单数据
      this.form2={
        need:true,
        companyId: '',//公司id
        companyUserName: '',//人员名称
        userPhoneNumber: '',//人员手机号
      },
      this.dialogFormVisible2 = true
    },
    // 新增任务-点击保存
     saveBtn(){
      console.log('新增公司-点击保存')
      if(this.form.companyName.trim()===''){
        this.$message({
          message: '请将信息填写完整！',
          type: 'warning'
        });
        return
      }
      console.log(this.form)
      whiteListCompanyAddApi(this.form).then(res=>{
        if(res.success){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.whiteListCompanyFun(); //获取公司列表
        }else{
          this.$message.error(res.errorMessage);
        }
      })
    },
    // 新增人员-点击保存
    saveBtn2(){
      console.log('新增人员-点击保存')
      if(this.form2.companyUserName.trim()===''){
        this.$message({
          message: '请将信息填写完整！',
          type: 'warning'
        });
        return
      }
      console.log(this.selectCompany)
      this.form2.companyId = this.selectCompany.id
      console.log(this.form2)
      whiteListCompanyUserAddApi(this.form2).then(res=>{
        if(res.success){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.dialogFormVisible2 = false
            this.whiteListCompanyShowCompanyUserFun(); //获取人员列表
        }else{
          this.$message.error(res.errorMessage);
        }
      })
    },
    // 点击 查看人员 
    ShowCompanyUser(info){
      console.log('点击 查看人员 ')
      console.log(info)
      this.selectCompany = info
      this.whiteListCompanyShowCompanyUserFun() //获取人员列表
    },
    whiteListCompanyShowCompanyUserFun(){
      let param = {
        current:this.current,
        pageSize:this.pageSize,
        companyId:this.selectCompany.id
      }
      whiteListCompanyShowCompanyUserApi(param).then(res=>{
        console.log('点击 查看人员 --请求结果')
        console.log(res)
        this.showRenYuan = true
        this.total = res.total
        this.tableData2 = res.data
      })
    },
    // 人员列表--删除
    DeleteCompanyUser(id){
      let param = {
        need:true,
        companyuserid:id
      }
      whiteListCompanyDeleteApi(param).then(res=>{
        console.log('删除-人员')
        console.log(res)
        if(res.success) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.whiteListCompanyShowCompanyUserFun() //获取人员列表 
        }
      })
    },
    // 返回公司列表页
    returnHandle(){
      this.showRenYuan = false
      this.current = 1
      this.pageSize = 10
      this.whiteListCompanyFun()
    }

  }
}
</script>

<!--顶部的横栏颜色定义-->
<style>
.headerBg {
  background: #ccc !important;
}

.el-menu-item-group__title {
  padding: 0 0 0 0;
}
.returnHandlec{
  margin-right: 20px;
  cursor: pointer;
}
</style>